<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改密码</title>

  <link rel="stylesheet" href="/statics/css/bootstrap.min.css">
  <link rel="stylesheet" href="/statics/css/users.css">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <!-- 网页icon头像 -->
  <link rel="shortcut icon" href="/statics/img/registerOk.png">

</head>

<body>
  <ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item layui-this"><a href="/home">首页</a></li>
    <li class="layui-nav-item"><a href="/home/personalDetails">个人信息</a></li>
    <li class="layui-nav-item">
      <a href="/home/personalDetails"><img src="/statics/img/userHeadPortrait.jpg" class="layui-nav-img">{{username}}</a>
      <dl class="layui-nav-child">
        <dd><a href="javascript:;">修改密码</a></dd>
        <dd><a href="javascript:;" onclick="logOff()">注销</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item"><a href="/home/inRegardToXiaoPang">关于小胖</a></li>
  </ul>

  <div id="container">

    <div class="row" style="margin-right: 0px;">
      <!-- 左布局 -->
      <div class="col">
         <!-- 图片 -->
         <div id="loginErrorPicture" style="margin-left: 7rem;">
            <img src="/statics/img/修改密码.png" width="600rem" height="600rem" class="img-fluid" alt="">
        </div>
      </div>

      <!-- 右布局 -->
      <div class="col">
        <form action="/home/updatepwdJudge" method="POST" id="updatepwd" style="margin-top: 6rem;">
            <label for=""><h1>修改密码</h1></label>
            <div>
            <label for=""><h3>旧密码：</h3></label>
            <input type="password" placeholder="旧密码：" class="form-control" style="width: 20rem;" name="name_passwordBox" id="passwordBox">                  
            <label for="" class="errorHint1 invisible" style="color: red;">a</label>    
        </div>
            <div>
            <label for=""><h3>新密码：</h3></label>
            <input type="password" placeholder="新密码：" class="form-control" style="width: 20rem;" name="name_newPasswordBox" id="newPasswordBox">                  
            <label for="" class="errorHint2 invisible" style="color: red;">b</label>      
        </div>
            <div>
            <label for=""><h3>再输一次新密码：</h3></label>
            <input type="password"  placeholder="再输一次新密码：" class="form-control" style="width: 20rem;" name="name_againNewPasswordBox" id="againNewPasswordBox">                  
            <label for="" class="errorHint3 invisible" style="color: red;">c</label>     
        </div>
            <div style="margin-top: 2rem; margin-left: 12rem;">
                <input type="button" class="btn btn-outline-primary" value="修改密码" name="" id="" onclick="updatePassword()">
                <input type="button" class="btn btn-outline-secondary" value="取消" name="" id="" onclick="cancel()" style="margin-left: 2rem;">
            </div>
        </form>
      </div>
      
    </div>
    </div>


      <script src="/statics/js/jquery-3.6.0.min.js"></script>
      <!-- axios -->
      <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

      <script src="/statics/js/bootstrap.min.js"></script>
      <script src="/statics/js/SpiderWeb.js"></script>
      <script src="../layui/layui.js"></script>
      <script>
        layui.use(['layer', 'form'], function () {
          var layer = layui.layer
            , form = layui.form;
          var element = layui.element;
        });
      </script>

      <script>
        // 个人信息按钮
        function personalDetails() {
          window.location.href = "/home/personalDetails"
        }

        // 注销按钮点击事件
        function logOff() {
          axios({
            method: 'post',
            url: '/logout'
          }).then(function (response) {
            // axios工具下，服务器真正返回的数据在返回对象的data中
            var res = response.data;
            if (res.code === 200) {
              window.location.href = '/';
            }
          })
        }
      </script>

      <!-- 鼠标点击特效  -->
      <!-- <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function ($) {
          $("body").click(function (e) {
            var a = new Array("(⌒▽⌒)", "(=・ω・=)", "(ﾟДﾟ≡ﾟдﾟ)!?", "Σ( ￣□￣||)", "(▔□▔)/", "Σ(ﾟдﾟ;)", "(^・ω・^ )", "（￣へ￣）", "(￣ε(#￣) Σ", "ヽ(`Д´)ﾉ", "(╯°口°)╯┴—┴", "🍕", "🍔", "🌭", "🥞", "🍳", "🍞", "🥐", "🍠", "🥙", "🍤", "🥩", "🍖", "🥂", "🥗", "🧀", "🍱", "🍝", "🐷", "❤", "🤣", "💕", "💖", "🌹", "💋", "🎂", "🎉", "🎃", "🎈", "🎀", "🎊", "🚗", "🎄", "❤", "💕", "💞", "💓", "💗", "💖", "💘", "💝", "💟", "💌", "🍟", "🍗", "🍿", "江呆呆是个憨憨💕💟💌");
            var $i = $("<span></span>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
              y = e.pageY;
            $i.css({
              "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
              "top": y - 20,
              "left": x,
              "position": "absolute",
              "font-weight": "bold",
              "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
            });
            $("body").append($i);
            $i.animate({
              "top": y - 180,
              "opacity": 0
            },
              1500,
              function () {
                $i.remove();
              });
          });
        });
      </script> -->

      <!-- 取消修改密码按钮 -->
      <script>
          function cancel(){
              window.location.href = '/home'
          }
      </script>

    <!-- 修改密码按钮点击事件 -->
    <script>
        function updatePassword(){
            var passwordBox = $('#passwordBox').val().trim() || '';;
            var newPasswordBox = $('#newPasswordBox').val().trim() || '';;
            var againNewPasswordBox = $('#againNewPasswordBox').val().trim() || '';;
            //用旧密码长度大于0并且新密码长度大于0并且密码等于确认密码则提交表单 
            if (passwordBox.length > 0 && newPasswordBox.length > 0 && newPasswordBox === againNewPasswordBox) {
                $('#updatepwd').submit();    // 提交表单
            } else if (passwordBox.length === 0) {    // 旧密码为空
                // $('div').removeClass('errorMessage');    //.removeClass(errorMessage)清除.errorMessage的class的css属性
                fn_errorHint1('请输入旧密码');  // 旧密码下面的错误提示函数
            } else if (newPasswordBox.length === 0) {
                fn_errorHint2('请输入新密码');    // 密码下面的错误提示函数
            } else if (newPasswordBox.length === 0) {
                fn_errorHint3('请再确认一次密码，以防出错');
            } else if (passwordBox !== newPasswordBox) {    // 确认密码下面的错误提示函数
                fn_errorHint3('出错了啦，两次新密码不一致');
                return false;
            }
        };

        // 旧密码下面的错误提示函数
        function fn_errorHint1(errorHint) {
            $('.errorHint1').text(errorHint);
            $('.errorHint1').removeClass('invisible');
            setTimeout(() => {
                $('.errorHint1').addClass('invisible');
            }, 3000);
        }
        // 新密码下面的错误提示函数
        function fn_errorHint2(errorHint) {
            $('.errorHint2').text(errorHint);
            $('.errorHint2').removeClass('invisible');
            setTimeout(() => {
                $('.errorHint2').addClass('invisible');
            }, 3000);
        }
        // 确认密码下面的错误提示函数
        function fn_errorHint3(errorHint) {
            $('.errorHint3').text(errorHint);
            $('.errorHint3').removeClass('invisible');
            setTimeout(() => {
                $('.errorHint3').addClass('invisible');
            }, 3000);
        }
    </script>
</body>
</html>